<template>
  <view class="container">
    <!-- 加载状态 -->
    <view class="loading-container" v-if="loading">
      <view class="loading-spinner"></view>
      <text class="loading-text">正在加载...</text>
    </view>

    <!-- 详情内容 -->
    <view class="detail-content" v-if="!loading && noticeDetail">
      <!-- 标题 -->
      <view class="notice-title">
        {{ noticeDetail.noticeTitle }}
      </view>

      <!-- 时间 -->
      <view class="notice-time" v-if="noticeDetail.createTime">
        {{ formatDate(noticeDetail.createTime) }}
      </view>

      <!-- 主图 -->
      <view class="notice-banner" v-if="noticeDetail.bannerUrl">
        <image
          :src="noticeDetail.bannerUrl"
          mode="widthFix"
          class="banner-image"
        />
      </view>

      <!-- 内容 -->
      <view class="notice-content">
        <!-- 如果内容是HTML格式，使用rich-text展示 -->
        <rich-text
          v-if="noticeDetail.noticeContent"
          :nodes="noticeDetail.noticeContent"
        ></rich-text>
        <!-- 如果没有内容，显示提示 -->
        <text v-else class="no-content">暂无详细内容</text>
      </view>
    </view>

    <!-- 错误状态 -->
    <view class="error-container" v-if="!loading && !noticeDetail">
      <text class="error-text">获取详情失败，请重试</text>
      <button class="retry-button" @click="loadNoticeDetail">重新加载</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import request from '@/utils/request';

// 公告详情接口类型定义
interface NoticeDetail {
  noticeTitle: string;
  bannerUrl: string;
  noticeContent: string;
  createTime: string;
}

interface NoticeDetailResponse {
  code: number;
  msg: string;
  data: NoticeDetail;
}

// 页面状态
const loading = ref(false);
const noticeDetail = ref<NoticeDetail | null>(null);
const noticeId = ref<string>('');

// 获取公告详情
const loadNoticeDetail = async () => {
  if (!noticeId.value) {
    uni.showToast({
      title: '参数错误',
      icon: 'error',
    });
    return;
  }

  try {
    loading.value = true;

    const response = await request<NoticeDetailResponse>({
      url: `/notice/${noticeId.value}`,
      method: 'GET',
    });

    console.log('公告详情响应:', response);

    if (response.code === 200 && response.data) {
      noticeDetail.value = response.data;
    } else {
      uni.showToast({
        title: response.msg || '获取详情失败',
        icon: 'error',
      });
    }
  } catch (error) {
    console.error('获取公告详情失败:', error);
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'error',
    });
  } finally {
    loading.value = false;
  }
};

// 格式化时间
const formatDate = (dateStr: string) => {
  try {
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  } catch (error) {
    return dateStr;
  }
};

// 页面加载时获取参数
onLoad((options) => {
  console.log('页面参数:', options);
  if (options.id) {
    noticeId.value = options.id;
    loadNoticeDetail();
  } else {
    uni.showToast({
      title: '缺少必要参数',
      icon: 'error',
    });
    // 1秒后返回上一页
    setTimeout(() => {
      uni.navigateBack();
    }, 1000);
  }
});
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #ff6b35;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 30rpx;
}

.loading-text {
  font-size: 32rpx;
  color: #666;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 详情内容样式 */
.detail-content {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.notice-title {
  padding: 40rpx 30rpx 20rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
  word-wrap: break-word;
}

.notice-time {
  padding: 0 30rpx 30rpx;
  font-size: 24rpx;
  color: #999;
  border-bottom: 1rpx solid #f0f0f0;
}

.notice-banner {
  width: 100%;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  display: block;
}

.notice-content {
  padding: 30rpx;
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
  word-wrap: break-word;
}

.no-content {
  color: #999;
  text-align: center;
  padding: 100rpx 0;
  display: block;
}

/* rich-text 内容样式优化 */
:deep(.rich-text) {
  line-height: 1.8;
}

:deep(.rich-text img) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20rpx 0;
  border-radius: 8rpx;
}

:deep(.rich-text p) {
  margin: 20rpx 0;
}

:deep(.rich-text h1),
:deep(.rich-text h2),
:deep(.rich-text h3) {
  margin: 30rpx 0 20rpx 0;
  font-weight: bold;
}

:deep(.rich-text h1) {
  font-size: 32rpx;
}

:deep(.rich-text h2) {
  font-size: 30rpx;
}

:deep(.rich-text h3) {
  font-size: 28rpx;
}

/* 错误状态样式 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 40rpx;
}

.error-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.retry-button {
  background-color: #ff6b35;
  color: #fff;
  border: none;
  border-radius: 50rpx;
  padding: 20rpx 60rpx;
  font-size: 28rpx;
}

.retry-button:active {
  background-color: #e55a2b;
}
</style>
